<template>
  <el-select
    class="input-default-width w-container"
    size="large"
    placeholder="搜索赛项"
    clearable
    filterable
    remote
    :remote-method="handleRemoteMethod"
    :loading="loading"
    @change="handleChange"
  >
    <el-option
      v-for="item in data"
      :key="item"
      :label="item.label"
      :value="item.value"
    ></el-option>
  </el-select>
</template>

<script  setup>
import { GetEventsNotApi } from "@/api/manage/institution";
import { ref, onMounted, getCurrentInstance } from "vue"
const data = ref([])
const loading = ref(false)
const emit = defineEmits('title-change')
const handleChange = (value) => {
  const find = data.value.find(item => item.value == value)
  if (find) {
    emit('title-change', find.label)
  } else {
    emit('title-change', "全部赛项")
  }
}
/**
 * 远程搜索
 */
const handleRemoteMethod = async (query) => {
  if (!query) {
    return;
  }
  loading.value = true;
  let res = await GetEventsNotApi({
    eventName: query
  })
  if (res.success) {
    data.value = res.entityList.map((item) => {
      return {
        label: item.name + `(${item.playingTime})`,
        value: item.rootId,
      }
    })
  } else {
    data.value = [];
  }
  loading.value = false;
}

</script>

<style lang="scss" scoped>
.w-container {
  --el-input-width: 156px !important;
  :deep(.el-input) {
    --el-input-width: 156px !important;
  }
}
</style>